<template>
	<div style="width: 100%;height: 100%;">
		<div class="machine-layout-container">
			<el-row class="machine-layout-container-inner" :gutter="10">
				<el-col
					v-for="(layoutItem, layoutIndex) in layoutData"
					:key="layoutIndex"
					:span="12"
					style="margin-top: 10px;"
				>
					<div class="card-item">
						<div class="card-item-title">
							<span style="margin-right: 6px;border-radius: 4px;" class="el-icon-s-home"></span>
							<span>{{ layoutItem.workshopName }}</span>
						</div>
						<div class="card-item-layout-container">
							<grid-layout
								ref="gridlayout"
								:layout.sync="layout"
								:col-num="layoutItem.colNum"
								:row-height="layoutItem.rowHeight"
								:is-draggable="false"
								:margin="[0, 0]"
								:auto-size="false"
								:is-resizable="false"
								:responsive="false"
								:vertical-compact="false"
								:prevent-collision="true"
								:use-css-transforms="true"
							>
								<grid-item
									v-for="(item) in layoutItem.machineLayoutList"
									:key="item.id"
									:x="item.x"
									:y="item.y"
									:w="item.w"
									:h="item.h"
									:i="item.i"
									:style="{border: !item.noticeList || !item.noticeList.length ? 'solid 1px #808695' : ''}"
									class="grid-item"
								>
									<div style="position: relative;width: 100%;height: 100%;display: flex;">
										<div
											v-for="(noticeItem, noticeIndex) in item.noticeList || []"
											:key="noticeIndex"
											style="width: 100%;height: 100%;background: #808695;"
											:style="setGridStyle(noticeItem)"
										></div>
										<div :ref="`bt`+item.id" style="height: 100%;width: 100%;position: absolute;top:0;left: 0;" class="flex-center" @click="onShowPopover(item)">{{ item.name }}</div>
									</div>
								</grid-item>
							</grid-layout>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!--机台的提示-->
		<el-popover
			v-if="showPop"
			ref="pop"
			:reference="reference"
			trigger="click"
			:append-to-body="isFullScreen"
		>
			<machine-popover-body :active-layout-item="activeLayoutItem" @on-status="onSelectMachineItem"></machine-popover-body>
		</el-popover>
	</div>
</template>

<script>
    import VueGridLayout from 'vue-grid-layout';
    import colorMixin from '../colors-mixin';
    import machinePopoverBody from './machine-popover-body';

    export default {
        mixins: [colorMixin],
        components: {
            machinePopoverBody,
            GridLayout: VueGridLayout.GridLayout,
            GridItem: VueGridLayout.GridItem
        },
        props: {
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            layoutData: {
                type: Array,
                default() {
                    return [];
                }
            },
            isFullScreen: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                // 保存当前激活的reference
                activeLayoutItem: {},
                reference: {},
                // 控制渲染条件 如果不用v-if会报错 具体可自行尝试
                showPop: false,
                layout: []
            };
        },
        methods: {
            onSelectMachineItem() {
                this.$emit('on-status', JSON.parse(JSON.stringify(this.activeLayoutItem)));
            },
            onShowPopover(item) {
                // 这个操作是为了避免与源码中的点击reference doToggle方法冲突
                if (this.activeLayoutItem.id === item.id && this.showPop) return;
                this.showPop = false;
                this.activeLayoutItem = item;
                // 因为reference是需要获取dom的引用 所以需要传DOM
                this.reference = this.$refs['bt' + item.id][0];
                this.$nextTick(() => {
                    // 等待显示的popover销毁后再 重新渲染新的popover
                    this.showPop = true;
                    this.$nextTick(() => {
                        // 此时才能获取refs引用
                        this.$refs.pop.doShow();
                    });
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .machine-layout-container {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        .machine-layout-container-inner {
            width: 100%;
            height: 100%;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            .card-item {
                background: #1E1A46;
                width: 100%;
                height: 100%;
                border-radius: 6px;
                .card-item-title {
                    width: 100%;
                    height: 32px;
                    margin-bottom: 10px;
                    font-size: 14px;
                    padding: 0 12px;
                    font-weight: 700;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #54d3d8;
                    background: url("../../../../assets/images/common/card-title.png") no-repeat center 100%;
                }
                .card-item-layout-container {
                    height: calc(100% - 42px);
                    width: 100%;
                    overflow: auto;
                }
                // 滚动条样式
                .card-item-layout-container::-webkit-scrollbar{
                    width: 6px;
                    height: 7px;
                }
                .card-item-layout-container::-webkit-scrollbar-thumb:hover{
                    width: 6px;
                    height: 7px;
                    cursor: pointer;
                    background-color: #114896;
                }
                .card-item-layout-container::-webkit-scrollbar-thumb{
                    border-radius: 1em;
                    background-color: #1A2F68;
                }
                .card-item-layout-container::-webkit-scrollbar-track{
                    border-radius: 1em;
                    background-color: rgba(50,50,50,.1);
                }

                .grid-item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    color: #fff;
                    position: relative;
                    cursor: pointer;
                    .delete-icon {
                        display: none;
                        background: #ed4014;
                        color: #fff;
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                    .config-grid {
                        display: none;
                        position: absolute;
                        left: 0;
                        top: 0;
                        font-size: 13px;
                        color: black;
                    }

                }
                .grid-item:hover .delete-icon {
                    font-size: 14px;
                    display: block;
                    cursor: pointer;
                }
                .grid-item:hover .config-grid {
                    display: block;
                    cursor: pointer;
                }
            }
        }
    }
</style>
